<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />
	<title>Fantasy Preview Page</title>
	<meta name="keywords" content="fantasy, preview page, side bar, responsive design, free template, bootstrap, templatemo" />
	<meta name="description" content="Fantasy, preview page with side bar, responsive design, free bootstrap template" />
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<!-- Custom styles for this template -->
	<link href="css/justified-nav.css" rel="stylesheet" type="text/css">
	<link href="templatemo_style.css" rel="stylesheet" type="text/css">

	<!-- HTML 5 shim for IE backwards compatibility -->
		<!-- [if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
		</script>
		<![endif]-->

	<script>
	// https://github.com/twbs/bootstrap/issues/9774
	function refresh()
	{
		var container = document.getElementById('preview');
		var masthead = document.getElementById('masthead');
		var content = document.getElementById('img_preview');
		container.removeChild(masthead);
		container.insertBefore(masthead, content);
	}
	</script>
</head>
<body onresize="refresh()">
	<div id="main_container">
		<div class="container" id="preview">
			<div class="header">
				<div class="navbar-header">
		          	<a href="http://www.templatemo.com/preview/templatemo_393_fantasy" rel="nofollow"><img src="images/templatemo_logo.jpg" alt="fantasy" class="templatemo_logo"></a>
		        </div>
      			<form  action="#" method="get" class="navbar-form navbar-right" role="search">
      				<div class="form-group">
      					<input type="text" class="form-control" placeholder="Search" id="keyword" name="keyword">
      				</div>
      				<button type="submit" class="btn btn-default" name="Search">Go</button>
      			</form>
                <a class="header_bg" href="http://cn.mystockphoto.com/"   target="_blank"><img src="images/header.png" alt="" title="visit cn.mystockphoto.com" /></a>
			</div>
			<div class="cleaner"></div>
			<div class="masthead" id="masthead">
		        <ul class="nav nav-justified">
		          <li><a href="index.html">Home</a></li>
                  <li><a href="about.html">About</a></li>
		          <li class="active"><a href="preview.html">Products</a></li>
		          <li><a href="preview.html">Services</a></li>
		          <li><a href="contact.html">Contact</a></li>
		        </ul>
	      	</div> <!-- nav -->
			<div class="row" id="img_preview">
				<div class="col-md-9">

					<h3>Model Girl One</h3>

					<a href="images/templatemo_preview.jpg" title="Click to see the original size">
						<img src="images/templatemo_preview.jpg"
                        	alt="Model Girl" class="img-responsive" width="840" height="840">
					</a>

				</div>
				<!-- http://stackoverflow.com/questions/20471467/bootstrap-vertical-positioning-to-horizontal-in-smaller-screen -->
				<div class="col-md-3">
					<div class="preview_footer_container">
						<div class="footer_item section_box col-xs-12 col-sm-4 col-md-12">
							<h4>Fantasy Responsive</h4>
                            <p>Vivamus pulvinar ligula in lorem gravida, vel congue leo sodales. Quisque bibendum iaculis libero et porttitor.</p>
							<p><b>Added</b>: 25 February 2084</p>
							<p><b>Views</b>: 540,266</p>
							<p><b>Downloads</b>: 120,324</p>
                            <a href="http://www.templatemo.com/page/1" rel="nofollow"
                            	class="btn btn-primary" role="button">Download</a>
                            <a href="http://www.templatemo.com/page/2" rel="nofollow"
                            	class="btn btn-info" role="button">Preview</a>
						</div>

                        <div class="footer_item section_box col-xs-12 col-sm-4 col-md-12">
							<h4>Our Support</h4>
                            <p>Pellentesque ac posuere nisl. Cras ac tempor sapien, sit amet euismod dui. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>.</p>
                            <p>Nullam tempus, quam eget tempor adipiscing, nulla purus, sed egestas nisl lacus non urna.</p>
                            <a href="http://www.templatemo.com/page/1" rel="nofollow"
                            	class="btn btn-info" role="button">Visit Forums</a>
						</div>

						<div class="footer_item section_box col-xs-12 col-sm-4 col-md-12">
							<h4>Useful Links</h4>
                            <ul class="sidebar_menu">
                                <li><a href="http://www.templatemo.com/page/1" rel="nofollow" target="_blank">free web templates</a></li>
                                <li><a href="http://www.flashmo.com/page/1" rel="nofollow" target="_blank">flash templates</a></li>
                                <li><a href="http://www.koflash.com" rel="nofollow" target="_blank">cool websites gallery</a></li>
                                <li><a href="http://www.templatemo.com" rel="nofollow" target="_blank">responsive themes</a></li>
							</ul>
                            <a href="http://www.templatemo.com/page/1" rel="nofollow"
                            	class="btn btn-info" role="button">View More</a>
						</div>

					</div> <!-- preview_footer_container -->

				</div>
			</div>

			<div class="row" id="other_downloads">
				<h3 class="col-lg-12">Featured Models</h3>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<a href="http://www.templatemo.com/preview/templatemo_372_titanium" rel="nofollow" class="thumbnail">
						<img src="images/templatemo_image_01.jpg" alt="Model Girl 1">
						<p class="hideOverflow">
	                    	<abbr title="New Model Girl One">New Model...</abbr>
	                    </p>
					</a>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<a href="http://www.templatemo.com/preview/templatemo_378_dragonfly" rel="nofollow" class="thumbnail">
						<img src="images/templatemo_image_03.jpg" alt="Model Girl 3">
						<p>Model Third</p>
					</a>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<a href="http://www.templatemo.com/preview/templatemo_375_tech_layer" rel="nofollow" class="thumbnail">
						<img src="images/templatemo_image_05.jpg" alt="Model Girl 5">
						<p>Model Fifth</p>
					</a>
				</div>
				<div class="col-xs-6 col-sm-3 col-md-3">
					<a href="http://www.templatemo.com/preview/templatemo_371_gallery" rel="nofollow" class="thumbnail">
						<img src="images/templatemo_image_07.jpg" alt="Model Girl 7">
						<p>Seventh Model</p>
					</a>
				</div>
			</div>
		</div>
		<footer class="container">
			<div class="credit row">
				<div class="col-md-6 col-md-offset-3">
					<div id="templatemo_footer">
						Copyright © 2084 <a href="#">Your Company Name</a> | Design: <a href="http://www.templatemo.com/preview/templatemo_393_fantasy" rel="nofollow">Fantasy</a>
					</div>
				</div>
				<div class="col-md-3">
					<div style="text-align: right">
						<a href="http://www.facebook.com/templatemo" rel="nofollow"><img src="images/facebook.png" alt="Like us on Facebook"></a>
						<a href="#"><img src="images/twitter.png" alt="Follow us on Twitter"></a>
						<a href="#"><img src="images/rss.png" alt="RSS feeds"></a>
					</div>
				</div>
			</div>
		</footer>
	</div>
	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <!-- Hiding text overflow: http://stackoverflow.com/questions/15308061/how-to-avoid-text-overflow-in-twitter-bootstrap -->
<script type='text/javascript' src='js/logging.js'></script>
</body>
</html>